import React from 'react'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
import RouteCuard from './RouteCuard'

function PageA() {
    return <h1>PageA</h1>
}

function PageB() {
    return <h1>PageB</h1>
}

export default function App() {
    return (
        <Router
            getUserConfirmation={(msg, callback) => {
                // 当跳转页面的时候，会调用该函数，并且将阻塞内容传递过来
                // 要配合阻塞使用, block(msg)
                console.log('yem', msg);
                // callback(true) // 允许跳转
                callback(window.confirm(msg))
            }}
        >
            {/* ul>li*2>Link{页面} */}
            <ul>
                <li>
                    <Link to="/pageA" >页面A</Link>
                </li>
                <li>
                    <Link to="/pageB" >页面B</Link>
                </li>
            </ul>
            <RouteCuard onChange={(prevLocation, location, action) => {
                console.log(`日志：从页面${prevLocation.pathname}进入页面${location.pathname}，进入方式${action}`);
            }}>
                <Route path="/pageA" component={PageA} />
                <Route path="/pageB" component={PageB} />
            </RouteCuard>
        </Router >
    )
}
